<template>
  <div class="dashboard-page">
    <aside class="sidebar">
      <div class="profile-card">
        <img class="avatar" :src="adminAvatar" alt="Sarah Smith" />
        <div class="profile-info">
          <span class="name">Sarah Smith</span>
          <span class="role">Admin</span>
        </div>
      </div>

      <nav class="sidebar-menu">
        <template v-for="item in menu" :key="item.label">
          <RouterLink
            v-if="item.path"
            :to="item.path"
            :class="['menu-item', item.active && 'active']"
          >
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </RouterLink>
          <button v-else :class="['menu-item', item.active && 'active']">
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </button>
        </template>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <div class="brand">
          <img :src="hospitalLogo" class="brand-logo" alt="Hospital Logo" />
          <div>
            <h1 class="page-title">Payment</h1>
            <p>All Payment Records</p>
          </div>
        </div>

        <div class="header-actions">
          <button class="icon-btn"><i class="ri-notification-3-line"></i></button>
          <button class="icon-btn"><i class="ri-settings-3-line"></i></button>
        </div>
      </header>

      <section class="payment-card">
        <header class="payment-header">
          <h2>All Payment</h2>
          <div class="payment-tools">
            <button class="ghost-btn" type="button" @click="addPayment">+ Add Payment</button>
            <label class="search-box">
              <span>Search By</span>
              <input v-model="searchKeyword" type="text" placeholder="Name / Treatment" />
            </label>
            <button class="filter-btn" type="button" title="Search">
              <i class="ri-filter-3-line"></i>
            </button>
          </div>
        </header>

        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Date</th>
                <th>Doctor</th>
                <th>Treatment</th>
                <th>Charges</th>
                <th>Tax</th>
                <th>Discount</th>
                <th>Total</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in filteredPayments" :key="row.id">
                <td>
                  <label class="checkbox">
                    <input type="checkbox" />
                    <span></span>
                  </label>
                </td>
                <td>{{ row.date }}</td>
                <td class="link-text">{{ row.doctor }}</td>
                <td><span class="badge badge-warning">{{ row.treatment }}</span></td>
                <td>{{ row.charges }}</td>
                <td>{{ row.tax }}</td>
                <td>{{ row.discount }}</td>
                <td>{{ row.total }}</td>
                <td class="row-actions">
                  <button class="icon-btn" type="button" title="View" @click="viewPayment(row)"><i class="ri-eye-line"></i></button>
                  <button class="icon-btn" type="button" title="Edit" @click="editPayment(row)"><i class="ri-edit-line"></i></button>
                  <button class="icon-btn" type="button" title="Delete" @click="removePayment(row.id)"><i class="ri-delete-bin-line"></i></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <footer class="table-footer">
          <span>{{ filteredPayments.length }} results found: Showing page 1 of 1</span>
          <nav class="pagination">
            <button class="page-btn" disabled>Previous</button>
            <button class="page-btn active">1</button>
            <button class="page-btn" disabled>2</button>
            <button class="page-btn" disabled>Next</button>
          </nav>
        </footer>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const adminAvatar = 'https://i.pravatar.cc/100?img=48'
const hospitalLogo =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><linearGradient id='a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff86d5'/><stop offset='100%' stop-color='%23907cff'/></linearGradient></defs><rect x='4' y='4' width='56' height='56' rx='18' fill='%23ffffff' stroke='url(%23a)' stroke-width='4'/><path d='M32 14c9.9 0 18 8.1 18 18s-8.1 18-18 18S14 41.9 14 32 22.1 14 32 14zm0 6a12 12 0 100 24 12 12 0 000-24zm1.5 5v5.5H39v3H33.5V39h-3v-5.5H25v-3h5.5V25h3z' fill='url(%23a)'/></svg>"

const sidebarMenu = [
  { label: 'Menu', icon: 'ri-compass-3-line', path: '/' },
  { label: 'Dashboard', icon: 'ri-dashboard-2-line', path: '/dashboard' },
  { label: 'Patient Form', icon: 'ri-calendar-check-line', path: '/patient-form' },
  { label: 'Patient Profile', icon: 'ri-user-3-line', path: '/patient-profile' },
  { label: 'Payment', icon: 'ri-bill-line', path: '/payment-table' },
  { label: 'Reports', icon: 'ri-bar-chart-2-line', path: null },
  { label: 'Pharmacy', icon: 'ri-capsule-line', path: null },
  { label: 'Settings', icon: 'ri-equalizer-line', path: null },
  { label: 'Logout', icon: 'ri-shut-down-line', path: null },
]

const menu = computed(() =>
  sidebarMenu.map((item) => ({
    ...item,
    active: item.path === route.path,
  }))
)

const payments = ref([
  {
    id: 1,
    date: '12 Jan 2022',
    doctor: 'Dr Jacob Ryan',
    treatment: 'Check up',
    charges: '$145',
    tax: '5%',
    discount: '8%',
    total: '$156',
  },
  {
    id: 2,
    date: '12 Jan 2022',
    doctor: 'Dr Rubina Delayer',
    treatment: 'Cholera',
    charges: '$132',
    tax: '4%',
    discount: '6%',
    total: '$139',
  },
  {
    id: 3,
    date: '12 Jan 2022',
    doctor: 'Dr Smith Rayan',
    treatment: 'Blood Test',
    charges: '$98',
    tax: '3%',
    discount: '0%',
    total: '$101',
  },
  {
    id: 4,
    date: '13 Jan 2022',
    doctor: 'Dr Jacob Ryan',
    treatment: 'X-Ray',
    charges: '$165',
    tax: '5%',
    discount: '5%',
    total: '$173',
  },
  {
    id: 5,
    date: '13 Jan 2022',
    doctor: 'Dr Rubina Delayer',
    treatment: 'Fever',
    charges: '$125',
    tax: '4%',
    discount: '10%',
    total: '$135',
  },
  {
    id: 6,
    date: '14 Jan 2022',
    doctor: 'Dr Smith Rayan',
    treatment: 'Covid Test',
    charges: '$180',
    tax: '6%',
    discount: '12%',
    total: '$189',
  },
  {
    id: 7,
    date: '14 Jan 2022',
    doctor: 'Dr Jacob Ryan',
    treatment: 'Diabetes',
    charges: '$142',
    tax: '5%',
    discount: '8%',
    total: '$152',
  },
  {
    id: 8,
    date: '15 Jan 2022',
    doctor: 'Dr Rubina Delayer',
    treatment: 'Check up',
    charges: '$145',
    tax: '5%',
    discount: '8%',
    total: '$156',
  },
])

const paymentSeed = ref(payments.value.length + 1)
const searchKeyword = ref('')

const filteredPayments = computed(() => {
  if (!searchKeyword.value.trim()) return payments.value
  const keyword = searchKeyword.value.trim().toLowerCase()
  return payments.value.filter(
    (row) =>
      row.doctor.toLowerCase().includes(keyword) ||
      row.treatment.toLowerCase().includes(keyword) ||
      row.date.toLowerCase().includes(keyword)
  )
})

function addPayment() {
  const id = paymentSeed.value
  payments.value.push({
    id: Date.now(),
    date: '16 Jan 2022',
    doctor: (['Dr Jacob Ryan', 'Dr Rubina Delayer', 'Dr Smith Rayan'][id % 3]) ?? 'Dr Jacob Ryan',
    treatment: (['Check up', 'Blood Test', 'X-Ray'][id % 3]) ?? 'Check up',
    charges: '$' + (120 + id).toString(),
    tax: '5%',
    discount: id % 2 === 0 ? '6%' : '10%',
    total: '$' + (130 + id).toString(),
  })
  paymentSeed.value += 1
}

function viewPayment(row: (typeof payments.value)[number]) {
  window.alert(`缴费详情\n日期：${row.date}\n医生：${row.doctor}\n科室：${row.treatment}\n总计：${row.total}`)
}

function editPayment(row: (typeof payments.value)[number]) {
  window.alert(`编辑功能示例：可以在此弹窗中修改 ${row.doctor} 的缴费信息。`)
}

function removePayment(id: number) {
  payments.value = payments.value.filter((row) => row.id !== id)
}
</script>

<style scoped>
@import './shared-dashboard.css';

.payment-card {
  background: var(--card-bg);
  border-radius: 32px;
  padding: 36px;
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-header h2 {
  margin: 0;
  font-size: 24px;
}

.payment-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(249, 250, 254, 0.9);
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid rgba(148, 123, 255, 0.2);
  font-size: 13px;
  color: var(--text-muted);
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-body);
}

.filter-btn {
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff89d6, #a788ff);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}

.table-wrapper {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(248, 249, 255, 0.85);
  box-shadow: inset 0 1px 4px rgba(31, 39, 79, 0.04);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 16px 24px;
  font-size: 13px;
  color: var(--text-muted);
}

td {
  padding: 14px 24px;
  font-size: 14px;
  border-top: 1px solid rgba(213, 217, 232, 0.35);
}

tbody tr:first-child td {
  border-top: none;
}

.row-actions {
  display: flex;
  gap: 10px;
}

.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox span {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(148, 123, 255, 0.35);
  display: inline-block;
  position: relative;
}

.checkbox input:checked + span {
  background: linear-gradient(135deg, #ff89d6, #a788ff);
}

.checkbox input:checked + span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 13px;
}

.pagination {
  display: flex;
  gap: 10px;
}

.page-btn {
  border: none;
  background: rgba(248, 249, 255, 0.9);
  padding: 8px 16px;
  border-radius: 18px;
  color: var(--text-muted);
  cursor: pointer;
}

.page-btn.active {
  background: linear-gradient(135deg, #ff89d6, #a788ff);
  color: #fff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.link-text {
  color: #3681f7;
  font-weight: 600;
}
</style>

